<template>
  <transition name="fade">
    <button v-show="visible" @click="$emit('click')" class="back-top">
      <i class="fa fa-arrow-up"></i>
    </button>
  </transition>
</template>

<script>
export default {
  name: 'BackTop',
  props: {
    visible: Boolean
  }
}
</script>

<style scoped>
.back-top{
  position:fixed;
  right:24px;
  bottom:24px;
  width:48px;height:48px;
  background:#8B5A2B;
  color:#fff;border:none;border-radius:50%;
  cursor:pointer;z-index:999;transition:opacity .3s;
}
.fade-enter-active,.fade-leave-active{transition:opacity .3s}
.fade-enter,.fade-leave-to{opacity:0}
</style>